<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件委托2</title>
</head>

<body>
    <article id="content">
        <p>Brownie lollipop <strong><span>carrot cake</span></strong> gummies lemon drops sweet roll dessert tiramisu.
            Pudding muffin <span>cotton candy</span> croissant fruitcake tootsie roll. Jelly jujubes brownie.
            Marshmallow jujubes topping sugar plum jelly jujubes chocolate.</p>

        <p>Tart bonbon soufflé gummi bears. Donut marshmallow <span>gingerbread cupcake</span> macaroon jujubes muffin.
            Soufflé candy caramels tootsie roll powder sweet roll brownie <span>apple pie</span> gummies. Fruitcake
            danish chocolate tootsie roll macaroon.</p>
    </article>
    <script>
        const myCustomDiv = document.createElement('div');

        for (let i = 1; i <= 200; i++) {
            const newElement = document.createElement('p');
            newElement.textContent = 'This is paragraph number ' + i;



            myCustomDiv.appendChild(newElement);
        }

        document.body.appendChild(myCustomDiv);
        myCustomDiv.addEventListener('click', function respondToTheClick(evt) {
            console.log(evt.target.nodeName);
            if (evt.target.nodeName == 'P') {
                console.log(evt.target.textContent + ' was clicked.');
            }
        });

        document.querySelector('#content').addEventListener('click', function (evt) {
            if (evt.target.matches('span')) { // ← 验证目标是我们需要的元素
                console.log('A span was clicked with text ' + evt.target.textContent);
            }
        });
    </script>
</body>

</html>